<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form :model="postForm" :inline="true">
      <el-row>
        <el-col :span="5">
          <el-form-item label="IP" style="width: 100%;">
            <el-select placeholder="ip 地址" v-model="ipadd">
              <el-option v-for="(item,index) in ipadds" :key="item+index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="appId" style="width: 100%;">
            <el-select placeholder="appId" v-model="appId">
              <el-option v-for="(item,index) in appIds" :key="item+index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="serviceName" style="width: 100%;">
            <el-select placeholder="serviceName" v-model="serviceName">
              <el-option v-for="(item,index) in serviceNames" :key="item+index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="version" style="width: 100%;">
            <el-input placeholder="不填默认所有版本" v-model="version"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="env" style="width: 100%;">
            <el-select placeholder="不选默认所有版本" v-model="env">
              <el-option v-for="(item,index) in envs" :key="item+index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="serviceId" style="width: 100%;">
            <el-input clearable style="width: 100%;" placeholder="存在serviceId时其它过滤条件都会被忽略" v-model="serviceId">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><i class="el-icon-connection"></i></el-divider>
      <el-button type="primary" @click="getAllServices">获取所有的微服务</el-button>
      <el-button type="success" @click="getServiceWithCond">按条件查询微服务</el-button>
      <el-button type="danger" @click="delServiceWithCond">按条件删除微服务</el-button>
      <el-tooltip class="item" content="强制删除是指即使被别的微服务依赖也会强制删除, 可能会影响别的微服务" placement="top">
        <el-button type="danger" @click="delServiceWithCond(true)">按条件强制删除微服务</el-button>
      </el-tooltip>
    </el-form>
    <el-divider><i class="el-icon-loading"></i></el-divider>
    <json-viewer
      :value="ans"
      :expand-depth=5
      copyable
      sort>
    </json-viewer>
    <!-- you can add element-ui's tooltip -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top :visibility-height="300" :back-position="50" transition-name="fade"/>
    </el-tooltip>
  </div>
</template>

<script>
import request from '@/utils/request'
import JsonViewer from 'vue-json-viewer'
import BackToTop from '@/components/BackToTop'

export default {
  components: { JsonViewer, BackToTop },
  data() {
    return {
      ipadds: ['10.26.0.222', '10.33.123.167', '10.31.52.215', '10.31.49.183', '10.31.36.47', '10.31.36.224', '10.31.36.216', '10.33.123.142'],
      ipadd: '10.26.0.222',
      appIds: ['WiseCarCloud'],
      appId: 'WiseCarCloud',
      serviceNames: ['car-manager', 'cloud-connecting', 'message-center', 'openapi', 'service-center', 'user-manager'],
      serviceName: 'car-manager',
      version: undefined,
      envs: ['development', 'production'],
      env: undefined,
      serviceId: undefined,
      port: 30100,
      ans: {},
      postForm: {}
    }
  },
  created() {
    // this.getAllServices()
  },
  methods: {
    async getAllServices() {
      this.clearAns()
      const { services } = await request({
        url: `/cse/microservice/all?ip=${this.ipadd}`,
        method: 'get'
      })
      this.ans = services
      console.log(services)
    },
    async getServiceWithCond() {
      this.clearAns()
      let url = `/cse/microservice/condition?ip=${this.ipadd}&appId=${this.appId}&serviceName=${this.serviceName}`

      if (this.version) {
        url = `${url}&version=${this.version}`
      }
      if (this.env) {
        url = `${url}&env=${this.env}`
      }
      const { services } = await request({
        url,
        method: 'get'
      })
      this.ans = services
      console.log(services)
    },
    async delServiceWithCond(force) {
      this.clearAns()
      let url = `/cse/microservice/condition?ip=${this.ipadd}&appId=${this.appId}&serviceName=${this.serviceName}`

      if (this.version) {
        url = `${url}&version=${this.version}`
      }
      if (this.env) {
        url = `${url}&env=${this.env}`
      }
      if (force) {
        url = `${url}&force=${force}`
      }
      await request({
        url,
        method: 'delete'
      })
    },
    clearAns() {
      this.ans = {}
    },
    copy(text) {
      this.$copyText(text).then(e => {
        this.$notify({
          title: '成功',
          message: '复制成功!',
          type: 'success'
        })
      }, e => {
        this.$notify.error({
          title: '失败',
          message: '复制RT失败!'
        })
      })
    }
  }
}
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
